<template>
    <el-card>
        <el-tabs v-model="activeName" @tab-click="changeTab">
            <el-tab-pane label="车厂结算" name="operationList">
                <el-form ref="CustomerForm" :inline="true" :model="CustomerForm" class="tpl-form-inline pb0">
                    <el-form-item label="时间">
                        <el-date-picker v-model="CustomerForm.birthday" type="daterange" range-separator="~" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions"
                            start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="车厂">
                        <el-select v-model="CustomerForm.name" placeholder="全部">
                            <el-option label="吉利汽车" value="吉利汽车"></el-option>
                            <el-option label="长城汽车" value="长城汽车"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="保司">
                        <el-select v-model="CustomerForm.bsName" placeholder="全部">
                            <el-option label="阳光保险" value="阳光保险"></el-option>
                            <el-option label="中国平安保险" value="中国平安保险"></el-option>
                            <el-option label="太平洋保险" value="太平洋保险"></el-option>
                            <el-option label="中国人保" value="中国人保"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="mt10 mb20">
                    <el-button type="primary" icon="el-icon-search" @click="queryList1" :disabled="loading">查询</el-button>
                    <el-button @click="reset" icon="el-icon-refresh" :disabled="loading">重置</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportFile" >导出</el-button>
                </div>
                <el-table class="sd" stripe border :data="tableData" v-loading="loading">
                    <el-table-column align="center" prop="index" label="序号" width="100px"></el-table-column>
                    <el-table-column align="center" prop="date" label="时间"></el-table-column>
                    <el-table-column align="center" prop="name" label="车厂"></el-table-column>
                    <el-table-column align="center" prop="bsName" label="保司"></el-table-column>
                    <el-table-column align="center" prop="nums" label="保单数"></el-table-column>
                    <el-table-column align="center" prop="bonus" label="奖励金分成" :render-header="icons"></el-table-column>
                    <el-table-column align="center" prop="bonus2" label="数据使用费" :render-header="icons2"></el-table-column>
                    <!-- <el-table-column align="center" prop="bonus3" label="技术服务费"></el-table-column> -->
                    <el-table-column align="center" prop="resultNums" label="结算金额"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">结算详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t mt20 fr"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="保司结算" name="operationDate">
                <el-form ref="CustomerForm2" :inline="true" :model="CustomerForm2" class="tpl-form-inline pb0">
                    <el-form-item label="时间">
                        <el-date-picker v-model="CustomerForm2.birthday" type="daterange" range-separator="~" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions2"
                            start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="车厂">
                        <el-select v-model="CustomerForm2.name" placeholder="全部">
                            <el-option label="吉利汽车" value="吉利汽车"></el-option>
                            <el-option label="长城汽车" value="长城汽车"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="保司">
                        <el-select v-model="CustomerForm2.bsName" placeholder="全部">
                            <el-option label="阳光保险" value="阳光保险"></el-option>
                            <el-option label="中国平安保险" value="中国平安保险"></el-option>
                            <el-option label="太平洋保险" value="太平洋保险"></el-option>
                            <el-option label="中国人保" value="中国人保"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="mt10 mb20">
                    <el-button type="primary" icon="el-icon-search" @click="queryList2" :disabled="loading">查询</el-button>
                    <el-button @click="reset" icon="el-icon-refresh" :disabled="loading">重置</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportFile" >导出</el-button>
                </div>
                <el-table class="sd" stripe border :data="tableData2" v-loading="loading">
                    <el-table-column align="center" prop="index" label="序号" width="100px"></el-table-column>
                    <el-table-column align="center" prop="date" label="时间"></el-table-column>
                    <el-table-column align="center" prop="name" label="车厂"></el-table-column>
                    <el-table-column align="center" prop="bsName" label="保司"></el-table-column>
                    <el-table-column align="center" prop="nums" label="保单量"></el-table-column>
                    <el-table-column align="center" prop="bonus" label="车主奖励金" :render-header="icons"></el-table-column>
                    <el-table-column align="center" prop="qdBonus" label="渠道服务费" :render-header="icons3"></el-table-column>
                    <el-table-column align="center" prop="jsBonus" label="技术服务费" :render-header="icons4"></el-table-column>
                    <el-table-column align="center" prop="resultNums" label="结算金额" :render-header="icons5"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit2(scope.$index, scope.row)">结算详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="tpl-mg-t mt20 fr"
                               small
                               @size-change="pageSizeChange"
                               @current-change="pageCurrentChange"
                               :current-page="queryForm.pageNum"
                               :page-sizes="[10, 20, 30, 40, 50, 100]"
                               :page-size="queryForm.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total2"
                                style="margin-bottom: 5px">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script>
    export default {
        name: 'settlementInfo',
        data () {
            return {
                // tab页标签
                activeName: 'operationList',
                // 列表查询条件
                queryForm: {
                    pageNum: 1,
                    pageSize: 10
                },
                 // 查询表单
                CustomerForm: {
                    name: '',
                    bsName: ''
                },
                CustomerForm2: {
                    name: '',
                    bsName: '',
                    // pageNum: 1,
                    // pageSize: 10
                },
                // total: 0,
                tableData: [],newData: [],
                tableData2: [],newData2: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                            const start = new Date()
                            picker.$emit('pick', [start, start])
                        }
                    }]
                },
                pickerOptions2: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                            const start = new Date()
                            picker.$emit('pick', [start, start])
                        }
                    }]
                },
                loading: false
            }
        },
        created () {
            this.getList();
        },
        computed: {
            total() {
                return this.tableData.length;
            },
            total2() {
                return this.tableData2.length;
            }
        },
        methods: {
            handleEdit (i,r) {
                this.$routerTo('settlementDetail');
            },
            handleEdit2 (i,r) {
                this.$routerTo('settlementDetail2');
            },
            // 点击查询置为第一页
            queryList1 () {
                // this.CustomerForm.pageNum = 1
                this.params = { ...this.CustomerForm }
                delete this.params.birthday
                for (let key in this.params) {
                    if (!this.params[key] || this.params[key] === '' || this.params[key].length === 0) {
                        delete this.params[key]
                    }
                }
                if (this.CustomerForm.birthday && this.CustomerForm.birthday.length === 2) {
                    this.params.birthdayStart = new Date(new Date(new Date(this.CustomerForm.birthday[0]).setHours(0)).setMinutes(0)).setSeconds(0)
                    this.params.birthdayEnd = new Date(new Date(new Date(this.CustomerForm.birthday[1]).setHours(0)).setMinutes(0)).setSeconds(0) + 24 * 3600 * 1000
                }
                this.tableData = this.$filters(this.params, this.newData);
            },
            queryList2 () {
                // this.CustomerForm.pageNum = 1
                this.params = { ...this.CustomerForm2 }
                delete this.params.birthday
                for (let key in this.params) {
                    if (!this.params[key] || this.params[key] === '' || this.params[key].length === 0) {
                        delete this.params[key]
                    }
                }
                if (this.CustomerForm2.birthday && this.CustomerForm2.birthday.length === 2) {
                    this.params.birthdayStart = new Date(new Date(new Date(this.CustomerForm2.birthday[0]).setHours(0)).setMinutes(0)).setSeconds(0)
                    this.params.birthdayEnd = new Date(new Date(new Date(this.CustomerForm2.birthday[1]).setHours(0)).setMinutes(0)).setSeconds(0) + 24 * 3600 * 1000
                }
                this.tableData2 = this.$filters(this.params, this.newData2);
            },
            // 查询列表
            getList () {
                let cData = [], cData2 = [];
                    cData = [
                        {"index": "1","date": "2020年6月","name": "吉利汽车","bsName": "阳光保险","nums": "12345","bonus2": "4231","bonus3": "6386","bonus": "12345","resultNums": "15000"},
                        {"index": "2","date": "2020年5月","name": "吉利汽车","bsName": "中国平安保险","nums": "51246","bonus2": "13054","bonus3": "6386","bonus": "12345","resultNums": "15000"},
                        {"index": "3","date": "2020年4月","name": "吉利汽车","bsName": "太平洋保险","nums": "12985","bonus2": "14891","bonus3": "6386","bonus": "12345","resultNums": "15000"},
                        {"index": "4","date": "2020年3月","name": "吉利汽车","bsName": "中国人保","nums": "51246","bonus2": "9561","bonus3": "6386","bonus": "12345","resultNums": "15000"}
                    ];
                    cData2 = [
                        {"index": "1","date": "2020年6月","name": "吉利汽车","bsName": "阳光保险","nums": "12345","bonus": "12345","qdBonus": "12345","jsBonus": "12345","resultNums": "12345"},
                        {"index": "2","date": "2020年5月","name": "吉利汽车","bsName": "中国平安保险","nums": "12345","bonus": "12345","qdBonus": "12345","jsBonus": "12345","resultNums": "12345"},
                        {"index": "3","date": "2020年4月","name": "吉利汽车","bsName": "太平洋保险","nums": "12345","bonus": "12345","qdBonus": "12345","jsBonus": "12345","resultNums": "12345"},
                        {"index": "4","date": "2020年3月","name": "吉利汽车","bsName": "中国人保","nums": "12345","bonus": "12345","qdBonus": "12345","jsBonus": "12345","resultNums": "12345"},
                    ]
                this.tableData = cData;
                this.newData = cData;
                this.tableData2 = cData2;
                this.newData2 = cData2;
            },
            exportFile () {
                this.$message({ type: 'success', message: `导出成功!` })
            },
            // tab页转换
            changeTab (tab) {
                if (tab.name === 'operationDate') {
                    // this.$refs.schedule.getActivitySchedule()
                } else {
                    // this.getBaseDataList()
                }
            },
            reset () {
                this.CustomerForm = {
                    name: '',
                    bsName: ''
                }
                this.CustomerForm2 = {
                    name: '',
                    bsName: ''
                }
                this.$nextTick(() => {
                    this.getList()
                })
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.getList()
            },
            icons(h,{column}){
                const inReview = '奖励金：保单数（张）✖ 结算单价（元）'
                return h( 
                    'div', [
                        h('span', column.label),
                        h('el-tooltip', {
                            props: {
                                placement: 'top', effect:"light"
                            }
                        }, 
                        [
                            h('div', {
                                slot: 'content',
                                style: {
                                    'width':'250px', whiteSpace: 'normal',
                                }
                            }, inReview),
                            h('i', {
                                class: 'el-icon-question',
                                style: 'margin-left:5px;'
                            })
                        ],)
                    ]
        　　　　 )
            },
            icons2(h,{column}){
                const inReview = '数据使用费：保单数（张）✖  结算单价（元）'
                return h( 
                    'div', [
                        h('span', column.label),
                        h('el-tooltip', {
                            props: {
                                placement: 'top', effect:"light"
                            }
                        }, 
                        [
                            h('div', {
                                slot: 'content',
                                style: {
                                    'width':'250px', whiteSpace: 'normal',
                                }
                            }, inReview),
                            h('i', {
                                class: 'el-icon-question',
                                style: 'margin-left:5px;'
                            })
                        ],)
                    ]
        　　　　 )
            },
            icons3(h,{column}){
                const inReview = '渠道服务费：保单数（张）✖  结算费率（%）'
                return h( 
                    'div', [
                        h('span', column.label),
                        h('el-tooltip', {
                            props: {
                                placement: 'top', effect:"light"
                            }
                        }, 
                        [
                            h('div', {
                                slot: 'content',
                                style: {
                                    'width':'250px', whiteSpace: 'normal',
                                }
                            }, inReview),
                            h('i', {
                                class: 'el-icon-question',
                                style: 'margin-left:5px;'
                            })
                        ],)
                    ]
        　　　　 )
            },
            icons4(h,{column}){
                const inReview = '技术服务费：保单数（张）✖  结算费率（%）'
                return h( 
                    'div', [
                        h('span', column.label),
                        h('el-tooltip', {
                            props: {
                                placement: 'top', effect:"light"
                            }
                        }, 
                        [
                            h('div', {
                                slot: 'content',
                                style: {
                                    'width':'250px', whiteSpace: 'normal',
                                }
                            }, inReview),
                            h('i', {
                                class: 'el-icon-question',
                                style: 'margin-left:5px;'
                            })
                        ],)
                    ]
        　　　　 )
            },
            icons5(h,{column}){
                const inReview = '结算金额： 车主奖励金 + 渠道服务费 + 技术服务费'
                return h( 
                    'div', [
                        h('span', column.label),
                        h('el-tooltip', {
                            props: {
                                placement: 'top', effect:"light"
                            }
                        }, 
                        [
                            h('div', {
                                slot: 'content',
                                style: {
                                    'width':'310px', whiteSpace: 'normal',
                                }
                            }, inReview),
                            h('i', {
                                class: 'el-icon-question',
                                style: 'margin-left:5px;'
                            })
                        ],)
                    ]
        　　　　 )
            },
        }
    }
</script>

<style scoped>

</style>
